<template>
  <div>
    <search-form
      :search-config="searchData"
      :label-width="150"
      @clear="clearSearch"
      @visible-change="resetTableHeight"
      @search="handleSearch"
    />
    <c-permission-tabs v-model="activeType" code="tab" @tab-click="tabChange">
      <el-tab-pane label="全部" name="all">
        <List ref="refList1" :active-type="activeType" :serach-filters="serachFilters" type="all" />
      </el-tab-pane>
      <el-tab-pane label="待提交" name="submit">
        <List ref="refList2" :active-type="activeType" :serach-filters="serachFilters" type="submit" />
      </el-tab-pane>
      <!-- <el-tab-pane label="待确认" name="confirm" opt-code="confirm">
          <List :active-type="activeType" :serach-filters="serachFilters" type="confirm" />
        </el-tab-pane> -->
    </c-permission-tabs>
  </div>
</template>

<script>
import List from './components/list'

export default {
  name: 'ShopDesign',
  components: { List },
  data() {
    return {
      activeType: '',
      serachFilters: [],
      searchData: [
        { label: '门店', prop: 'shopCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '门店',
            interfacePath: '/select-service/api/v1/shop/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        { label: '客户', prop: 'clientCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' },
            apiHeader: {
              'permission-code': 'shopdesign',
              'Permission-App': 'slm'
            }
          },
          dialogConfig: {
            title: '客户',
            interfacePath: '/select-service/api/v1/customer/all/page',
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        { label: '办事处', prop: 'officeCode', type: 'dialog',
          config: {
            defaultProps: { label: 'name', value: 'code' }
          },
          dialogConfig: {
            title: '办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            setting: [{ prop: 'code', title: '编码', width: 120 }, { prop: 'name', title: '名称', width: 250 }]
          }
        },
        {
          type: 'select',
          prop: 'marketType',
          label: '报图类型',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/MARKET_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'constType',
          label: '门店建设类型',
          filter: true,
          config: {
            multiple: true,
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/CONST_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'bizmanType',
          label: '商家类型',
          filter: true,
          config: {
            multiple: true,
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/BIZMAN_TYPE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '门店建设项目号', prop: 'constCode', type: 'text', value: '', placeholder: '', filter: true },

        {
          type: 'select',
          prop: 'decorationRange',
          label: '门店建设范围',
          filter: true,
          config: {
            multiple: true,
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/DECORATION_RANGE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        {
          type: 'select',
          prop: 'state',
          label: '设计进度',
          filter: true,
          config: {
            filterable: false, // 是否允许输入关键字搜索
            remoteUrl: '/data-dict/api/v2/dictionary/SHOP_DESIGN_STATE?appCode=slm&domainCode=marketing',
            defaultProps: { label: 'dictName', value: 'dictCode' }
          }
        },
        { label: '设计申请人', prop: 'applicantName', type: 'text', value: '', placeholder: '', filter: true },

        { label: '归档时间', prop: 'archiveTime', type: 'date', value: '', placeholder: '', filter: true },
        { label: '首次设计申请时间', prop: 'firstApplyDate', type: 'date', value: '', placeholder: '', filter: true },
        { label: '最新设计申请时间', prop: 'newApplyDate', type: 'date', value: '', placeholder: '', filter: true },
        { label: '设计申请审核通过时间', prop: 'passingDate', type: 'date', value: '', placeholder: '', filter: true }

      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.drawToDetail()
  },
  methods: {
    tabChange(data) {
      this.$refs.refList1.setTableHeight()
      this.$refs.refList2.setTableHeight()
    },
    resetTableHeight() {
      this.$refs.refList1.setTableHeight()
      this.$refs.refList2.setTableHeight()
    },
    // 清空搜索条件
    clearSearch(data) {
      this.serachFilters = []
    },

    // 获取搜索条件
    handleSearch(data) {
      this.serachFilters = data.filtersRaw
    },
    // 图纸跳转到详情
    drawToDetail() {
      const { id, target } = this.$route.query
      if (target === 'detail') {
        this.$router.push({ name: 'DesignDetail', query: { id }})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.colorSetRed{
  color: red;
}
.head-box{
}
.tableUpButton{
  margin: 10px;
}
  .button{
    margin: 0px !important;
    width: 100px;
    border: 1px solid #dcdcdc;
  }
  .down-button{
    color: black;
  }
  .form{
    border: 1px solid #dcdcdc;
    padding: 20px;
  }
</style>
